<#assign title='edit ' + full_profile_name />
<#assign activeTitle="config_file" />
<#include "/frag.head.ftl">
<link rel="stylesheet" href="${s3('/codemirror/lib/codemirror.css')}">
<link rel="stylesheet" href="${s3('/codemirror/addon/lint/lint.css')}">
<link rel="stylesheet" href="${s3('/codemirror/addon/merge/merge.css')}">
<link rel="stylesheet" href="${s3('/codemirror/theme/idea.css')}">
<style>
  .CodeMirror {
    height: auto;
  }
</style>
<#assign editEnable=true />
<#include "/frag.cf.ftl">
<#include "/frag.foot.ftl">
<script src="${s3('/codemirror/lib/codemirror.js')}"></script>
<script src="${s3('/codemirror/addon/merge/merge.js')}"></script>
<script src="${s3('/codemirror/diff_match_patch.js')}"></script>
<script src="${s3('/codemirror/addon/lint/lint.js')}"></script>
<#assign lint=false />
<#if ext == 'json'>
  <script src="${s3('/codemirror/mode/javascript/javascript.js')}"></script>
  <script src="${s3('/codemirror/addon/lint/json-lint.js')}"></script>
  <#assign editorMode='application/json' />
<#elseif ext == 'yml'>
  <script src="${s3('/codemirror/mode/yaml/yaml.js')}"></script>
  <script src="${s3('/codemirror/js-yaml.js')}"></script>
  <script src="${s3('/codemirror/addon/lint/yaml-lint.js')}"></script>
  <#assign editorMode='yaml' />
  <#assign lint=true />
<#elseif ext == 'xml'>
  <script src="${s3('/codemirror/htmlhint.js')}"></script>
  <script src="${s3('/codemirror/mode/xml/xml.js')}"></script>
  <#assign editorMode='text/html' />
<#elseif ext == 'properties'>
<script src="${s3('/codemirror/mode/properties/properties.js')}"></script>
  <#assign editorMode='text/x-properties' />
</#if>

<script type="text/javascript">

  var editor;
  var contentJson = ${content_json};

  $(function () {
    initUI();
  });

  function initUI() {
    $('.CodeMirror').remove();
    $('#thecode_body').html('<div id="thecode"></div>')
    var target = document.getElementById("thecode");

    editor = CodeMirror.MergeView(target, {
      value: contentJson.content,
      orig: contentJson.content,
      lineNumbers: true,
      indentUnit: 2,
      tabSize: 2,
      indentWithTabs: false,
      smartIndent: true,
      mode: '${editorMode}',
      highlightDifferences: true,
      theme: 'idea',
      collapseIdentical: false,
      matchBrackets: true,
      autofocus: true,
        <#if lint>
        gutters: ["CodeMirror-lint-markers"],
        lint: true,
        </#if>
      extraKeys: {
        "Ctrl-S": function () {
          save();
        },
        Tab: function (cm) {
          var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
          cm.replaceSelection(spaces);
        }
      }
    });

    resize(editor);
  }

  function save() {
    //contentJson.content = editor.edit.getValue();

    var loadingLayerHandler;
    $.ajax({
      url: '/raw/${full_profile_name}',
      type: "put",
      data: JSON.stringify($.extend(contentJson, {content: editor.edit.getValue()})),
      contentType: "application/json; charset=utf-8",
      beforeSend: function () {
        loadingLayerHandler = top.layer.msg('正在操作...', {
          icon: 16,
          shade: 0.5,
          scrollbar: false,
          zIndex: top.layer.zIndex,
          anim: 0
        });
      },
      success: function (data) {
        // 关闭遮罩层
        top.layer.closeAll();
        if (data.success) {
          layer.msg(data.msg);
          contentJson.content = editor.edit.getValue();
          isEdit = false;
          initUI();
        } else {
          layer.open(data.msg);
        }
      },
      error: function (e) {
        // 关闭遮罩层
        top.layer.closeAll();
        top.layer.open({
          title: '发生错误',
          content: JSON.stringify(e),
          shadeClose: true,
          zIndex: top.layer.zIndex,
          anim: 0
        });
      }
    });

  }

  function mergeViewHeight(mergeView) {
    function editorHeight(editor) {
      if (!editor) return 0;
      return editor.getScrollInfo().height;
    }

    //return Math.min(640, Math.max(editorHeight(mergeView.leftOriginal()),
    //    editorHeight(mergeView.editor()),
    //    editorHeight(mergeView.rightOriginal())));
    return 640;
  }

  function resize(mergeView) {
    var height = mergeViewHeight(mergeView);
    for (; ;) {
      if (mergeView.leftOriginal())
        mergeView.leftOriginal().setSize(null, height);
      mergeView.editor().setSize(null, height);
      if (mergeView.rightOriginal())
        mergeView.rightOriginal().setSize(null, height);

      var newHeight = mergeViewHeight(mergeView);
      if (newHeight >= height) break;
      else height = newHeight;
    }
    mergeView.wrap.style.height = height + "px";
  }
</script>